import React, { Component } from 'react'
import { Switch, Route, withRouter } from 'react-router-dom'
import PrivteRoute from '@/components/PrivteRoute'
import { TransitionGroup, CSSTransition } from 'react-transition-group'

// 渲染的组件
import Layout from './views/Layout'
import Detail from './views/Detail'
import Login from './views/Login'
import Fav from './views/Fav'
import Record from './views/Record'

import './style/common.scss'

@withRouter
class App extends Component {
  render() {
    return (
      <>
        <main className="main-container">
          <TransitionGroup>
            <CSSTransition
              key={this.props.location.key}
              timeout={600}
              classNames="router"
            >
              <Switch>
                <Route path="/detail/:id" component={Detail} />
                <PrivteRoute path="/fav" component={Fav} />
                <PrivteRoute path="/login" component={Login} />
                <PrivteRoute path="/record" component={Record} />

                {/* 如果你使用到了子路由一定不要写严格匹配 */}
                <Route path="/" component={Layout} />
              </Switch>
            </CSSTransition>
          </TransitionGroup>
        </main>
      </>
    )
  }
}

export default App
